
<template>
    <div class="iframe-cont">
        <div class="content">
            <div class="title">{{$route.meta.title}}</div>
            <el-divider></el-divider>
            <!--     筛选区       -->
            <div class="f f-a-c">
                <search-date
                    clearable
                    :show-title="false"
                    @select="handleDate"
                ></search-date>
                <search-device-class
                    class="mar-left-10"
                    :multiple="false"
                    @select="handleMacType"
                ></search-device-class>
                <el-input class="search-group mar-left-20"
                          style="width: 220px"
                          placeholder="故障码/设备编号"
                          size="small"
                          clearable
                          v-model="queryParams.keyword"
                          @keydown.native.enter="handleQuery"
                >
                    <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
                </el-input>
            </div>

            <el-table class="table th-bg" :data="lists"  v-loading="loading"  element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                <el-table-column label="序号" prop="name" width="60" fixed>
                    <template slot-scope="scope">
                        <span>{{(queryParams.page - 1) * queryParams.limit + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="设备编号" prop="macCode"></el-table-column>
                <el-table-column label="故障码" prop="faultCode"></el-table-column>
                <el-table-column label="故障含义" prop="faultDesc" min-width="200" show-overflow-tooltip></el-table-column>
                <el-table-column label="故障时间" prop="faultTime"></el-table-column>
            </el-table>
            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.limit"
                @pagination="getList"
            />
        </div>


    </div>
</template>

<script>
import SearchDate from "@/components/SearchCondition/SearchDate";
import SearchMacType from "@/components/SearchCondition/SearchMacType";
import SearchDeviceClass from "@/components/SearchCondition/SearchDeviceClass";
export default {
    name: "index",
    components: {SearchDeviceClass, SearchMacType, SearchDate},
    data(){
        return{
            lists: [1],
            loading: false,//加载中
            total: 10,
            queryParams: {
                page: 1,
                limit: this.$tmp.PAGE_SIZES[0], //页长
                keyword: '',
                startTime: '',
                endTime: '',
                macType: ''
            }
        }
    },
    created() {
        this.getList();
    },
    methods:{
        handleQuery() {
            this.queryParams.page = 1
            this.getList()
        },
        // 重新分配
        reAllocate() {
            this.$confirm(`<span>确定当前设备重新分配至<span style="color: red;">合肥民创中心</span>运营商</span>`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
                dangerouslyUseHTMLString: true,
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '分配成功!'
                });
            })
        },
        //获取数据
        getList() {
            this.loading = true;
            this.$http({
                url:'/api/machine/fault/page',
                method: 'get',
                data: this.queryParams
            }).then((res)=>{
                this.lists = res.data;
                this.total = res.count;
            }).finally(() => {
                setTimeout(() => {
                    this.loading = false
                }, 200)
            })
        },
        handleMacType(e) {
            this.queryParams.deviceClass = e.ids
            this.handleQuery()
        },
        handleDate(e) {
            this.queryParams.startTime = e[0]
            this.queryParams.endTime = e[1]
            this.handleQuery()
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
::v-deep input[type="number"]{
    -moz-appearance: textfield;
}
::v-deep .el-form-item__content {
    margin-left: 10px;
}
.form-item {
    width: 400px;
}
.form-comp-item {
    width: 240px;
}
.table {
    margin-top: 20px;
}
</style>
